<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '个人中心',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 顶部用户信息卡片 -->
    <view class="bg-gradient-to-r from-blue-500 to-blue-600 p-6">
      <view class="flex items-center">
        <view class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center">
          <wd-icon name="user" size="32px" color="#ffffff" />
        </view>
        <view class="ml-4">
          <view class="text-white text-lg font-medium">{{ data?.username || '未登录' }}</view>
          <view class="text-white/80 text-sm mt-1">{{ data?.phone || '暂无手机号' }}</view>
        </view>
      </view>
    </view>

    <!-- 用户信息列表 -->
    <view class="px-4 -mt-4">
      <view class="bg-white rounded-lg shadow-sm">
        <wd-cell-group>
          <!-- 用户名 -->
          <wd-cell title="用户名" :value="data?.username">
            <template #icon>
              <wd-icon name="user" />
            </template>
          </wd-cell>

          <!-- 手机号 -->
          <wd-cell title="手机号" :value="data?.phone">
            <template #icon>
              <wd-icon name="phone" />
            </template>
          </wd-cell>

          <!-- 用户角色 -->
          <wd-cell title="用户角色">
            <template #icon>
              <wd-icon name="usergroup" />
            </template>
            <template #default>
              <wd-tag :type="data?.role === 2 ? 'warning' : 'primary'" size="small">
                {{ data?.role ? (data?.role === 2 ? '维修人员' : '普通用户') : '未登录' }}
              </wd-tag>
            </template>
          </wd-cell>

          <!-- 所属部门，仅当 deptId 存在时显示 -->
          <wd-cell
            v-if="data?.deptId"
            title="所属部门"
            :value="allDept.find((item) => item.value === data?.deptId)?.label"
          >
            <template #icon>
              <wd-icon name="computer" />
            </template>
          </wd-cell>
        </wd-cell-group>
      </view>
    </view>

    <!-- 功能区域 -->
    <view class="px-4 mt-4">
      <view class="bg-white rounded-lg shadow-sm">
        <wd-cell-group>
          <wd-cell title="设置" is-link>
            <template #icon>
              <wd-icon name="setting" />
            </template>
          </wd-cell>
        </wd-cell-group>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="px-4 mt-8">
      <wd-button
        danger
        size="large"
        block
        @click="handleLogout(userStore.token ? 'logout' : 'login')"
      >
        {{ userStore.token ? '退出登录' : '去登录' }}
      </wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useUserStore } from '@/store'
import { getUserInfo } from '@/service/auth/login'
import { getAllDept } from '@/service/common'
import { useMessage } from 'wot-design-uni/components/wd-message-box'

const message = useMessage()
const userStore = useUserStore()
const allDept = ref<any[]>([])
const { data, loading, run } = useRequest<any>(() => getUserInfo())

// 监听token变化
watch(
  () => userStore.token,
  (newToken) => {
    if (newToken) {
      run()
    }
  },
  { immediate: true },
)

watch(
  () => data.value?.role,
  (newRole) => {
    if (newRole === 2) {
      getDeptInfo()
    }
  },
)
/* 是维修人员时，获取部门信息 */
const getDeptInfo = async () => {
  const res: any = await getAllDept()
  allDept.value = res.data.map((item: any) => ({
    label: item.deptName,
    value: item.id,
  }))
}

// 退出登录
const handleLogout = (type: 'logout' | 'login') => {
  if (type === 'logout') {
    message
      .confirm('确认退出登录？')
      .then(() => {
        // 清空用户store
        userStore.reset()
        // 清空数据
        data.value = null
        // 重置首次访问标记
        uni.navigateTo({
          url: '/pages/auth/index',
        })
      })
      .catch(() => {
        // 用户取消退出
      })
  } else {
    uni.navigateTo({
      url: '/pages/auth/index',
    })
  }
}
</script>

<style lang="scss" scoped>
:deep(.wd-cell) {
  padding: 16px;
}

:deep(.wd-cell__title) {
  font-size: 15px;
}
:deep(.wd-icon) {
  font-size: 20px;
  color: #666;
}

:deep(.wd-icon:not(:first-child)) {
  margin-right: 12px;
}
</style>
